<div class="page" id="page-main">
    <header class="bar bar-nav">
        <h1 class="title">快速预订</h1>

        <div class="search-cond">

        </div>
    </header>

    <nav class="bar bar-tab">
        <a class="tab-item external" href="/">
            <span class="icon icon-home"></span>
            <span class="tab-label">首页</span>
        </a>
        <a class="tab-item active" href="#">
            <span class="icon icon-edit"></span>
            <span class="tab-label">预订</span>
        </a>
        <a class="tab-item external" href="/my">
            <span class="icon icon-me"></span>
            <span class="tab-label">我的</span>
        </a>
    </nav>

    <div class="content">
        <div id="hotel-list">
            <div class="card">
                <div class="card-header">
                    商务大床房
                    <a class="link">全景看房</a>
                </div>
                <div class="card-content">
                    <div class="list-block media-list">
                        <a class="item-link item-content">
                            <div class="item-media">
                                <img src="http://wx.useky.com:80/webcontext/upload/roomtype/20151011111608012_7144.jpg"
                                     width="100">
                            </div>
                            <div class="item-inner">
                                <div class="item-title-row">
                                    <div class="item-title">300元</div>
                                </div>
                                <div class="item-subtitle">商务大床房非常的商务</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="#page-order" class="button button-fill width-100">马上预订</a>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                商务大床房
                <a class="link">全景看房</a>
            </div>
            <div class="card-content">
                <div class="list-block media-list">
                    <a class="item-link item-content">
                        <div class="item-media">
                            <img src="http://wx.useky.com:80/webcontext/upload/roomtype/20151011111608012_7144.jpg"
                                 width="100">
                        </div>
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title">300元</div>
                            </div>
                            <div class="item-subtitle">商务大床房非常的商务</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="card-footer">
                <a href="#page-order" class="button button-fill width-100">马上预订</a>
            </div>
        </div>
    </div>
</div>
</div>


<div class="page" id="page-order">
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left back" href="#page-main">
            <span class="icon icon-left"></span>
            返回
        </a>

        <h1 class='title'>订单详情</h1>
    </header>

    <nav class="bar bar-tab">
        <div class="tab-item" href="#">
            <a class="button button-fill button-big" href="#page-order-success" style="border-radius: 0;width: 100%">确认订单</a>
        </div>
    </nav>

    <div class="content">
        <div class="content-block-title" style="margin-top: .75rem">订单详情</div>
        <div class="list-block">
            <ul>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">预订酒店</div>
                        <div class="item-after">闪订测试酒店</div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">预订房型</div>
                        <div class="item-after">商务大床房</div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">预订房数</div>
                        <div class="item-after">
                            <span class="mr-10 fs-l" style="line-height: 1"> - </span>
                            <input type="number" value="1" style="height: auto;width: 60px;text-align: center">
                            <span class="ml-10 fs-l" style="line-height: 1"> + </span>
                        </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">预到日期</div>
                        <div class="item-after">
                            2015-11-14
                        </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">预离日期</div>
                        <div class="item-after">
                            2015-11-15
                        </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">金额</div>
                        <div class="item-after color-warning">
                            300元
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="list-block">
            <ul>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-media">联系人</div>
                            <div class="item-input">
                                <input type="text" placeholder="您的姓名">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-media">手机号</div>
                            <div class="item-input">
                                <input type="number" id="input-phone-number" placeholder="您的手机">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-media">验证码</div>
                            <div class="item-input">
                                <input type="number" placeholder="输入短信验证码">
                            </div>
                            <div class="item-after">
                                <a class="js-get-yzm" data-url='/wallet/security/captcha' data-count='60'
                                   data-target-phone-number="#input-phone-number">获取验证码</a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-media">备注</div>
                            <div class="item-input">
                                <textarea></textarea>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div><!--end of content-->

</div>


<div class="page" id="page-order-success">
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left back" href="#page-main">
            <span class="icon icon-left"></span>
            返回
        </a>

        <h1 class='title'>下单成功</h1>
    </header>
    <div class="content">
        <div class="content-block-title" style="margin-top: .75rem">订单详情</div>
        <div class="list-block" style="margin: 0">
            <ul>
                <li class="order-info-item">
                    <div class="item-key">订单编号:</div>
                    <div class="item-value">RS134234234</div>
                </li>
                <li class="order-info-item">
                    <div class="item-key">预订酒店:</div>
                    <div class="item-value">闪订测试酒店</div>
                </li>
                <li class="order-info-item">
                    <div class="item-key">预订房型:</div>
                    <div class="item-value">商务大床房1间</div>
                </li>
                <li class="order-info-item">
                    <div class="item-key">入住时间:</div>
                    <div class="item-value">2015-11-15</div>
                </li>
                <li class="order-info-item">
                    <div class="item-key">下单时间:</div>
                    <div class="item-value">2015-11-14</div>
                </li>
            </ul>
        </div>
        <div class="content-block-title" style="margin-top: .75rem">客户信息</div>
        <div class="list-block">
            <ul>
                <li class="order-info-item">
                    <div class="item-key">联 系 人 :</div>
                    <div class="item-value">子龙</div>
                </li>
                <li class="order-info-item">
                    <div class="item-key">联系电话:</div>
                    <div class="item-value">137****6112</div>
                </li>
            </ul>
        </div>
        <div class="content-padded"><a class="button button-fill">支付</a></div>
        <div class="content-padded"><a href='select-room.html' class="button button-fill">选房</a></div>
        <div class="content-padded"><a class="button button-fill">取消订单</a></div>

    </div><!--end of content-->
</div>

{{#extend "pageJs"}}
<script src="{{getStatic 'ubooking/booking/booking.entry.js'}}"></script>
{{/extend}}